<template>
  <Card class="list">
    <div class="row">
      <RadioGroup v-if="false" v-model="button1" type="button">
        <Radio label="进行中"></Radio>
        <Radio label="完成"></Radio>
        <Radio label="失败"></Radio>
        <Radio label="全部"></Radio>
      </RadioGroup>
      <Dropdown trigger="click" @on-click="setSelectedAccountType" style="margin-left: 20px">
        <a href="javascript:void(0)">
          {{`${selectedAccountType||'全部'}`}}
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem name="">全部</DropdownItem>
          <DropdownItem v-for="(d,idx) in accountTypes" :name="d" :key="idx">{{d}}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Input @on-search="onSearch" v-model="accountName" class="search" clearable search enter-button placeholder="搜索公众号" />
    </div>
    <br>
    <div class="table_wrapper">
      <tables :loading="loading" :height="tableHeight" ref="tables" v-model="weixinList" :columns="columns" />
    </div>
    <br>
    <Page @on-change="loadList" @on-page-size-change="changePagesize" :current="current" :total="total" show-sizer :page-size="pageSize" />
    <Modal width="768" v-model="modalProp.show" title="公众号详情">
      <detail v-if="modalProp.show" :data="modalProp.data" />
    </Modal>
    <Modal v-model="selectArtical" footer-hide fullscreen :transfer="true" :closable="false">
      <iframe v-if="selectArtical" :src="`${'/v1/weixin/fileProxy1?file='+encodeURIComponent(selectArtical)}`" width="100%" height="100%" />
      <Icon type="md-close-circle" size="56" class="modal-close" color="#77dfdfdf" />
    </Modal>
  </Card>
</template>

<script>
import './list.less'
import {
  Tooltip
} from 'iview'
import {
  mapState,
  mapMutations,
  mapActions
} from 'vuex'
import Tables from '_c/tables'
import detail from './pubAccountDetail'
export default {
  name: 'tables_page',
  components: {
    Tables,
    detail
  },
  computed: {
    ...mapState({
      loading: state => state.weixin.loading,
      accountTypes: state => state.weixin.accountTypes,
      selectedAccountType: state => state.weixin.selectedAccountType,
      weixinList: state => state.weixin.weixinList,
      total: state => state.weixin.total,
      current: state => state.weixin.current,
      pageSize: state => state.weixin.pageSize,
      selectArtical: state => state.weixin.pubAccountdetail.selectArtical.Url
    }),
    accountName: {
      get () {
        return this.$store.state.weixin.accountName
      },
      set (accountName) {
        this.setAccountName(accountName)
      }
    },
    tableHeight () {
      return document.documentElement.clientHeight - 300
    }
  },
  data () {
    return {
      modalProp: {
        show: false,
        data: {}
      },
      button1: '',
      columns: [{
        title: 'Name',
        key: 'Name',
        width: 100,
        render: (h, params) => {
          return h(
            'a', {
              props: {
                href: '_blank'
              },
              on: {
                click: () => {
                  this.select(params.row)
                }
              }
            },
            params.row.Name
          )
        }
      },
      {
        title: 'Type',
        key: 'Type',
        width: 80
      },
      {
        title: 'Url',
        key: 'QrCodeLink',
        width: 240
      },
      {
        title: 'Info',
        key: 'Info',
        render: (h, params) => {
          return (
            <Tooltip transfer >
              <div slot="content" style={{ width: '150', whiteSpace: 'normal' }} >
                {params.row.Info}
              </div>
              <span style={{ width: '100px', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }} >
                {params.row.Info}
              </span>
            </Tooltip >
          )
        }
      },
      {
        title: '文章时间',
        key: 'daterange',
        render: (h, params) => {
          return (
            params.row.DateStart &&
            params.row.DateEnd && (<span > {`${params.row.DateStart}=>${params.row.DateEnd}`}</span>
            )
          )
        }
      },
      {
        title: 'Handle',
        width: 180,
        key: 'handle',
        fixed: 'right',
        button: [
          (h, params, vm) => {
            return h('div', [
              h(
                'Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.addWeixinTask(params.row)
                        .then(res => {
                          if (res.result === 'success') {
                            this.$Message.success('添加成功')
                          } else {
                            this.$Message.error(res.msg || '添加失败')
                          }
                        })
                        .catch(err => {
                          console.log(err)
                        })
                    }
                  }
                },
                '添加任务'
              )
            ])
          }
        ]
      }
      ]
    }
  },
  methods: {
    ...mapActions([
      'addWeixinTask',
      'onSearch',
      'init1',
      'setSelectedAccountType',
      'loadList' // 映射 this.increment() 到 this.$store.dispatch('increment') ]),
    ]),
    ...mapMutations([
      'setAccountName',
      'changePagesize' // 映射 this.increment() 为 this.$store.commit('increment')
    ]),
    select (data) {
      this.modalProp = {
        show: true,
        data
      }
    }
  },
  mounted () {
    this.init1()
  }
}
</script>

<style>
.ivu-modal-body {
  padding: 0;
}
iframe {
  border-width: 0;
}
.modal-close {
  position: absolute;
  right: 40px;
  top: 40px;
}
</style>
